<template>
    <el-row class="main padd20">
        <el-col class="box box-pack-between box-align-center">
            <el-col class="tl">
                <!-- <el-button type="primary" @click="$router.push('/add_question')">+ 新建试卷</el-button> -->
                <el-button type="primary" @click="goLib()" class="pub-btn">+ 添加题目</el-button>
            </el-col>
            <el-col class="tr box box-align-center">
                <!-- <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="searchVal">
                </el-input> -->
                <el-input placeholder="题目内容" v-model="searchVal" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="" @change="change">
                        <el-option label="全部分类" value="0"></el-option>
                        <el-option label="单选" value="1"></el-option>
                        <el-option label="多选" value="2"></el-option>
                        <el-option label="判断" value="3"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
                </el-input>
            </el-col>
        </el-col>

        <el-col class="paper-list mt10">
            <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :row-class-name="tableRowClassName" v-loading="loading">
                <el-table-column prop="cont" label="题目" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-html="scope.row.cont"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="题型" width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == `1`">单选</span>
                        <span v-if="scope.row.type == `2`">多选</span>
                        <span v-if="scope.row.type == `3`">判断</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" width="180" label="创建时间" :formatter="dateFormat">
                    <!-- <template slot-scope="scope">
                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                            编辑
                        </el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                            移除
                        </el-button>
                    </template> -->
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="handleEdit(scope.row)" type="text" size="small">
                            编辑
                        </el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small" style="color: red;">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
    import moment from "moment";
    export default {
        data() {
            return {
                searchVal: '',
                select: '0',
                tableData: [],
                schoolid: this.$store.state.schoolId,
                loading: false,
            };
        },
        mounted() {
            this.getData()
        },
        methods: {
            change(e) {
                console.log(e);
            },
            /*日期处理*/
            dateFormat: function(row, column) {
                var date = row[column.property];
                if (date === undefined) {
                    return ''
                }
                return moment(date).format("YYYY-MM-DD HH:mm")
            },
            formatData(row, column, cellValue, index) {

                //把传过来的日期进行回炉重造一下，又创建了一个js的 Date对象，进行重新构造，转为String字符串
                //最终返回 s 就可以了
                var s = new Date(cellValue).toLocaleString();
                return s;

                // 测试参数含义：不知道参数是什么含义的就打印出来
                // console.log(row)     	//拿到一行的所有信息，要拿到具体信息,只需要row.XXX 就可以了
                // console.log(column)  	//拿到列的信息
                // console.log(cellValue) //拿到单元格数据，拿到时间 2022-03-18T01:46:08.000+00:00
                // console.log(index)     //拿到索引
            },


            goLib() {
                this.$router.push({
                    path: "/add_questions",
                    query: {
                        id: 1,
                        type: 1
                    }
                })
            },
            getData() {
                this.loading = true;
                let url = '/ysubject/pagelist';
                let params = {
                    schoolid: this.schoolid,
                    pageSize: 100,
                    pageNum: 1
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    this.loading = false;
                    if (res.code == 0) {
                        this.tableData = res.page.list
                    }
                })
            },
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex %2 == 1) {
                    return 'warning-row';
                } else  {
                    return 'success-row';
                }
                return '';
            },
            deleteRow(rows) {
                // rows.splice(index, 1);
                console.log(rows);
                this.loading = true;
                let url = '/ysubject/delete';
                let params = {
                    id: rows.id
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    this.loading = false;
                    if (res.code == 0) {
                        this.$message.success('删除成功')
                        this.getData()
                    }
                })
            },
            handleEdit(data){
                this.$router.push({
                    path:'/edit_questions',
                    query:{
                        data:JSON.stringify(data)
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .main {
        box-sizing: border-box;
        height: 100%;
        background-color: #fff;
        overflow-y: auto;
    }

    .paper-list {
        border: 1px solid #ebeef5;
    }


    /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #565DFF;
        background: #565DFF;

        &:hover {
            border-color: #565DFF;
        }
    }

    /deep/ .el-radio__input.is-checked+.el-radio__label {
        color: #606266;
    }

    /deep/ .el-radio__inner:hover {
        border-color: #565DFF;
    }

    /deep/ .el-input__inner:focus {
        border-color: #565DFF;
    }

    /deep/ .re-input .el-input__inner {
        border-radius: 5px;
        border-color: #D0D4E2;
        // &:hover{
        //     border-color: #565DFF !important;
        // }
    }

    /deep/ .re-input .el-input__inner:focus,
    .re-input.el-select .el-input.is-focus .el-input__inner {
        border-color: #565DFF !important;
    }

    //时间修改
    /deep/ .el-range-editor.is-active,
    .el-range-editor.is-active:hover {
        border-color: #565DFF;
    }

    .return-btn {
        color: #ABB0C4;

        &:hover {
            color: #000;
        }
    }


    .tips {
        margin-right: 5px;
        width: 4px;
        height: 18px;
        background: #626BF1;
        border-radius: 2px;
    }

    .item {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;

        &:hover {
            color: #4852EC;
            background-color: #F0F3F8;
        }
    }

    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }


    /deep/ .el-table .warning-row {
        background: #FBFCFF;
    }

    /deep/ .el-table .success-row {
        background: #fff;
    }

    /deep/ .el-tooltip__popper {
        max-width: 400px
    }

    .el-tooltip__popper {
        max-width: 400px
    }
</style>
